<template>
  <div class="wrapper">
    <div class="container">
      <!-- 侧边菜单 -->
      <v-side-menu :side-menus="sideMenus" :top-menu="topMenu" @change-side-menu="changeSideMenu"></v-side-menu>
      <!-- 内容 -->
      <div class="main">
        <div class="main-wrap">
          <!-- 左侧收缩条 -->
          <div class="toggle-menu">
            <span class="glyphicon glyphicon-menu-left" title="收起" @click="toggleSideMenu($event)"></span>
          </div>
          <!-- Tab 标签页 -->
          <div class="template-tabs">
            <el-tabs v-model="activeIndex" type="card" closable @tab-click="clickTab" @tab-remove="removeTab">
              <el-tab-pane v-for="(item, index) in tabOptions" :key="item.path" :label="item.title" :name="item.path">
              </el-tab-pane>
            </el-tabs>
          </div>
          <!-- 工作区 -->
          <keep-alive>
            <router-view :bread-crumb="sideMenuName" v-if="$route.meta.keepAlive"></router-view>
          </keep-alive>
          <router-view v-if="! $route.meta.keepAlive"></router-view>
        </div>
      </div>
      <!-- 内容 end -->
      <!-- 消息modal弹窗 start -->
      <div class="modal fade" id="messageModal" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-sm" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h4 class="modal-title"></h4>
            </div>
            <div class="modal-body"></div>
            <div class="modal-footer">
              <input type="hidden" name="opt-result" id="opt-result">
              <button type="button" class="btn btn-primary" data-dismiss="modal">确定</button>
            </div>
          </div>
        </div>
      </div>
      <!-- 消息modal弹窗 end -->
    </div>
  </div>
</template>

<script>
import vSideMenu from './vSideMenu'

export default {
  name: 'vMainWrap',
  components: {
    'v-side-menu': vSideMenu
  },
  props: ['sideMenus', 'topMenu'],
  data () {
    return {
      sideMenuName: ''
    }
  },
  computed: {
    tabOptions() {
      if (this.$store.state.options.length == 0) {
        var cacheTabItem = sessionStorage.getItem('lxb_tab_active_item');
        if (cacheTabItem) {
          cacheTabItem = JSON.parse(cacheTabItem);
          this.$store.commit('add_tabs', cacheTabItem);
        }
      }
      return this.$store.state.options;
    },
    activeIndex: {
      get () {
        if (!this.$store.state.activeIndex) {
          var cacheTabItem = sessionStorage.getItem('lxb_tab_active_item');
          if (cacheTabItem) {
            cacheTabItem = JSON.parse(cacheTabItem);
            this.$store.state.activeIndex = cacheTabItem.path;
          }
        }
        return this.$store.state.activeIndex;
      },
      set (val) {
        if (this.$store.state.activeIndex != val) {
          this.$store.commit('set_active_index', val);
        }
      }
    }
  },
  created(){
    if (this.$store.state.tabRefresh[this.$route.path] === undefined){
      this.$store.commit('set_tab_refresh', this.$route.path);
    }
  },
  methods: {
    changeSideMenu: function (sideMenuName) {
      this.sideMenuName = sideMenuName;
    },
    toggleSideMenu(obj) {
      $('.side').toggle();
      $(obj).toggleClass('glyphicon-menu-right');
    },
    clickTab() {
      this.$goRoute(this.activeIndex);
    },
    removeTab(targetName) {
      // 最后一个不能删除
      if (this.$store.state.options.length <= 1) {
        return;
      }
      if (this.activeIndex === targetName) {
        let options = this.$store.state.options;
        let index = 0;
        for (let option of options) {
          if (option.path === targetName) {
            break;
          }
          index++;
        }
        let nextTab = options[1];
        if (index > 0) {
          nextTab = options[index -1]; 
        }
        this.$store.commit('delete_tabs', targetName);
        this.$store.commit('set_active_index', nextTab.path);
        this.$goRoute(nextTab.path);
      } else {
        this.$store.commit('delete_tabs', targetName);
      }
      
    }
  }
}
</script>
